<template>
  <span>
    <span class="box" @click="handleClick($event)">{{ content }}</span>
    <span class="bg_box" v-if="isContentShow">{{ content }}</span>

    <!-- 提交后显示的答案框 -->
    <span class="submited-show wrong" v-if="isWorng">
      <!-- 对错图标 -->
      <!--      <i class="iconfont icon-dui"></i>-->
      <i class="iconfont icon-cuo"></i>
      <!--      <span>{{ content }}</span>-->
    </span>
    <span class="submited-show right" v-if="isRight">
      <!-- 对错图标 -->
      <i class="iconfont icon-dui"></i>
      <!--      <span>{{ content }}</span>-->
    </span>
    <!-- 提交后显示答案 -->
    <span class="right" v-if="isShow">(答案：{{ content }})</span>
    <!-- <span>11</span> -->
  </span>
</template>

<script>
export default {
  props: ['content', 'isBgc'],
  data () {
    return {
      isSelect: false,
      isRight: false,
      isWorng: false,
      isShow: false,
      answer: "",
      isContentShow: false,
    }
  },
  created () {

  },
  methods: {
    handleClick (e) {
      // console.log(this.isSelect);
      // console.log(e.target.innerText);
      // 未选中的
      if (this.isSelect) {
        e.target.style.backgroundColor = "";
        e.target.style.color = '#666';
        this.$emit('sendNum', -1)
        // 选中的
      } else {
        e.target.style.backgroundColor = '#ff5e4e'
        e.target.style.color = '#fff';
        this.$emit('sendNum', 1)
      }
      this.isSelect = !this.isSelect
    },
  },
}
</script>

<style lang="less" scoped>
.bg_box {
  border: 1px solid #c9cccb;
  padding: 0.125rem 0.25rem;
  border-radius: 0.3125rem;
  color: #ccc;
}
.selected {
  background-color: #ff5e4e;
  color: #fff;
}
.box {
  display: inline-block;
  height: 2rem;
  line-height: 2rem;
  margin-right: 0.375rem;
  user-select: none;
  cursor: pointer;
  margin-bottom: 0.3125rem;
}

.submited-show {
  position: relative;
  display: inline-block;
  height: 2rem;
  // width: 9rem;
  padding: 0 .625rem;
  border-radius: 0.3125rem;
  border: 1px solid #eee;
  font-size: 1.125rem;
  vertical-align: middle;
  line-height: 2rem;
  padding-left: 1.875rem;
  text-align: center;
  margin-right: 0.3125rem;
  .iconfont {
    position: absolute;
    left: 0.625rem;
    top: 0;
  }
}
.right {
  border-color: #13bfbf !important;
  color: #13bfbf;
  margin-right: 0.1875rem;
}
.wrong {
  border-color: #ed1941 !important;
  color: #ed1941;
  background-color: #ffdcdc;
}
</style>
